<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文档与元素的关系(The relationship between documents and elements)</title>
  <!-- 
  在JavaScript中，文档（Document）和元素（Element）是网页结构的核心概念。它们之间的关系可以通过DOM（文档对象模型）来理解。

  一、文档（Document）
  - 定义：文档对象表示整个网页，通常指的是HTML文档。它是通过浏览器解析HTML文件后生成的对象。
  - 访问：可以通过 `document` 对象访问文档。 `document` 对象提供了对网页的整体访问和操作能力。

  二、元素（Element）
  - 定义：元素对象表示HTML文档中的具体HTML元素，例如 `<div>` 、 `<p>` 、 `<a>` 等。每个HTML标签在DOM中都对应一个元素对象。
  - 访问：可以通过 `document` 对象的方法访问和操作元素。例如，使用 `getElementById()` 、 `getElementsByClassName()` 、 `querySelector()` 等方法。

  三、文档与元素之间的关系
  1. 层级结构：
    - 文档是一个树形结构的根节点，包含多个元素节点。每个元素节点可以包含其他元素节点或文本节点。
    - 这种层级结构使得开发者能够以树形方式组织和访问网页内容。

  2. 父子关系：
    - 在DOM树中，文档对象是根节点，元素对象可以是父节点或子节点。例如，一个 `<div>` 元素可以包含多个 `<p>` 元素作为子节点。
    - 可以通过属性如 `parentNode` 、 `childNodes` 、 `firstChild` 、 `lastChild` 等来访问节点之间的关系。

  3. 操作元素：
    - 通过 `document` 对象可以创建、删除、修改元素。例如，使用 `createElement()` 方法创建新元素，使用 `appendChild()` 方法将元素添加到文档中。
    - 通过访问元素对象的属性和方法，可以修改元素的内容、样式和行为。例如，使用 `innerHTML` 属性修改元素的内容，使用 `style` 属性修改样式。

  总结
  - 文档对象表示整个HTML文档，是DOM树的根节点。
  - 元素对象表示文档中的具体HTML元素，是DOM树中的节点。
  - 文档与元素之间通过层级结构和父子关系相互关联，开发者可以通过 `document` 对象操作元素，实现动态网页效果。

   -->
</head>
<body>
  
  <div id="container">
    <p class="text">Hello, World!</p>
  </div>

  <script>

    // 0. 执行顺序
    const obj = {
      name: "Tom",
      age: 18,
      body: document.querySelector('body'),
      sayName: function () {
        console.log("sayName", this.name);
      }
    }

    console.log("执行顺序", obj.name, obj.age, obj.body, obj.sayName());

    document.body = document.querySelector('body');
    window.body = document.querySelector('body');
    document.age = 19;
    

    // 1. 文档对象-文档对象表示整个HTML文档，是DOM树的根节点。
    // 获取文档对象
    const doc = document;

    // 访问元素
    const container = doc.getElementById('container');
    const paragraph = doc.querySelector('.text');

    // 修改元素内容
    paragraph.innerHTML = 'Hello, JavaScript!';

    // 创建新元素并添加到文档
    const newParagraph = doc.createElement('p');
    newParagraph.innerHTML = 'This is a new paragraph.';
    container.appendChild(newParagraph);

    // 2. 元素对象-元素对象表示文档中的具体HTML元素，是DOM树中的节点
    // 获取元素对象
    const element = document.getElementById('container');

    // 访问元素属性
    const elementId = element.id;
    const elementClass = element.className;

    // 修改元素属性
    element.id = 'newId';
    element.className = 'newClass';

    // 3. 操作元素
    // 创建新元素
    const newElement = document.createElement('div');
    newElement.innerHTML = 'This is a new element.';

    // 添加新元素到文档
    document.body.appendChild(newElement);
    
    // 删除元素
    // document.body.removeChild(newElement);
    
  </script>
  
</body>
</html>